<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <br>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../css/annunciate/daxiao.css">
    <script src="/js/annunciate/zym_a.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="/js/jquery-3.6.0.js"></script>
    <script src="/lib/layui/layui.all.js"></script>
    <link rel="stylesheet" type="text/css" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../css/annunciate/zym_tianjia.css">
    <script src="/js/annunciate/zym_add.js"></script>

</head>
<body class="col-md-offset-2 col-lg-offset-2 col-xl-offset-1" id="body" onload="lookTime()">
<input type="hidden" th:value="${session.user.getId()}" id="u_id">
<div>
    <div class="col-md-12">
        <div class="panel panel-primary">
            <div class="panel-heading clearfix" style="background-color: #009688;">
                <h3 class="panel-title" style="text-align:center">增加公告<span
                        class="glyphicon glyphicon-leaf pull-right"></span></h3>
            </div>
            <div class="panel-body">
                <form class="form-inline pull-right">
                    <div class="form-group">

                        <div class="input-group">
                        </div>
                    </div>
                </form>
                <table class="table table-hover table-striped table-bordered" style="margin-top: 10px">
                </table>
                <div class="box1">
<!--                    <form class="layui-form">&ndash;&gt;-->
                        <table class="layui-table">
                            <tr>
                                <td>标题</td>
                                <td>
                                    <input type="text" class="layui-inpu title" style="width: 24%"/>
                                </td>
                            </tr>

                            <td>内容:</td>
                            <td colspan="3">
                                <textarea name="textarea" cols="100" rows="5" class="conetxt"
                                          id="in_room_msg"></textarea>
                            </td>
                            </tr>

                            <td colspan="3">
                                <div style="text-align: center;">
                                    <button class="btn btn-success" onclick="save()" id="user_send_all">添加</button>&nbsp;&nbsp;
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <button class="btn btn-success" onclick="save1()">查询</button>
                                </div>
                            </td>
                            </tr>
                        </table>
<!--                   						</form>-->
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<!--Websocket代码-->
<script type="text/javascript">
    $(function () {
        var urlPrefix = 'ws://127.0.0.1:8081/ws/';
        var ws = null;
        var joinfun = function () {
            let userId = $("#u_id").val();
            // let userId = 1;
            // if (userId == '') {
            //     alert("请输入用户id");
            //     return;
            // }
            var url = urlPrefix + userId;
            console.log(url + "----------------")
            ws = new WebSocket(url);
            ws.onopen = function () {
                console.log("建立 websocket 连接...");
            };
            ws.onmessage = function (event) {
                let aaa = JSON.parse(event.data);

                if (aaa.id != userId) {
                    layer.open({
                        type: 1
                        ,
                        title: false //不显示标题栏
                        ,
                        closeBtn: false
                        ,
                        area: ['250px', '300px']
                        ,
                        shade: 0.8
                        ,
                        id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        ,
                        btn: ['火速围观', '残忍拒绝']
                        ,
                        btnAlign: 'c'
                        ,
                        moveType: 1 //拖拽模式，0或者1
                        ,
                        content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;"><br><br> ' + aaa.content + '<br><br><br></div>'
                    });
                }
            };
            // ws.onclose = function () {
            //     $('#message_content').append('用户[' + userId + '] 断开连接!');
            //     console.log("关闭 websocket 连接...");
            // }
        };
        joinfun();//自动连接

        // // 重新连接
        // $('#user_add').click(function () {
        //     joinfun();
        // });

        //客户端发送消息到服务器
        $('#user_send_all').click(function () {
            let userId = $("#u_id").val();
            // let userId = 1;
            var msg = $('#in_room_msg').val();
            // var toUser = $("#toUser").val();
            var toUser = '';
            var req = {
                userId: userId,
                content: msg,
                toUser: toUser
            }
            console.log(JSON.stringify(req) + "--------------------");
            if (ws) {
                ws.send(JSON.stringify(req));
            }
        });
        // 断开连接
        // $('#user_back').click(function () {
        //     if (ws) {
        //         console.log("手动 关闭 websocket 连接...");
        //
        //         ws.close();
        //     }
        // });
    });
</script>
</html>